<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jshx.echarts.1.0.js"></script>
    <title>雷达图demo</title>
    <style>
        .demo {
            margin: 50px auto;
            width: 80%;
            height: 800px;
        }

        #main5 {
            width: 100%;
            height: 1000px;
        }

        #main6 {
            width: 60%;
            height: 600px;
        }

        #main7 {
            width: 40%;
            height: 500px;
        }

        #button {
            margin-left: 30%;
            margin-top: 50px;
        }

        #button1 {
            margin-top: 50px;
        }

        #button2 {
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="main" class="demo"></div>
    <hr>
    <button id="button">点此更新已有数据putData</button>
    <button id="button1">点此新增随机数据putData</button>
    <button id="button2">点此清除数据clearData</button>
    <div id="main1" class="demo"></div>
    <hr>
    <!-- <div id="main2" class="demo"></div>
    <hr> -->
    <div id="main3" class="demo"></div>
    <hr>
    <div id="main4" class="demo"></div>
    <hr>
    <div id="main5" class="demo"></div>
    <div id="main6" class="demo"></div>
    <div id="main7" class="demo"></div>
    <div id="main8" class="demo"></div>
    <script>
        var indicator = [
            { name: '销售', max: 6500 },
            { name: '管理', max: 16000 },
            { name: '信息技术', max: 30000 },
            { name: '客服', max: 38000 },
            { name: '研发', max: 52000 },
            { name: '市场', max: 25000 }
        ];
        var main = new HxChartRadar('main', indicator, '雷达图');
        main.init();
        main.putData('预算分配', 4300, 10000, 28000, 35000, 50000, 19000);
        main.putData('实际开销', 5000, 14000, 28000, 31000, 42000, 21000);

        var main1 = new HxChartRadar('main1', indicator, '点击上方按钮新增数据:putData');
        main1.init();
        main1.putData('初始数据', 5000, 14000, 28000, 31000, 42000, 21000);

        document.getElementById('button').addEventListener("click", function () {
            var data = [
                {
                    value: [Math.ceil(Math.random() * 6500), Math.ceil(Math.random() * 16000), Math.ceil(Math.random() * 30000), Math.ceil(Math.random() * 38000), Math.ceil(Math.random() * 52000), Math.ceil(Math.random() * 25000),],
                    name: '初始数据'
                }
            ]
            main1.putData('初始数据', Math.ceil(Math.random() * 6500), Math.ceil(Math.random() * 16000), Math.ceil(Math.random() * 30000), Math.ceil(Math.random() * 38000), Math.ceil(Math.random() * 52000), Math.ceil(Math.random() * 25000));
        })

        var num = 1;
        document.getElementById('button1').addEventListener("click", function () {
            main1.putData('第' + num + '次点击', Math.ceil(Math.random() * 6500), Math.ceil(Math.random() * 16000), Math.ceil(Math.random() * 30000), Math.ceil(Math.random() * 38000), Math.ceil(Math.random() * 52000), Math.ceil(Math.random() * 25000));
            num++;
        })

        document.getElementById('button2').addEventListener("click", function () {
            main1.clearData();
            num = 1;
        })

        var main3 = new HxChartRadar('main3', indicator, '修改标题位置:setTitleLocation');
        main3.init();
        main3.putData('预算分配', 4300, 10000, 28000, 35000, 50000, 19000);
        main3.putData('实际开销', 5000, 14000, 28000, 31000, 42000, 21000);
        main3.setTitleLocation('l');

        var main4 = new HxChartRadar('main4', indicator);
        main4.init();
        main4.putData('预算分配', 4300, 10000, 28000, 35000, 50000, 19000);
        main4.putData('实际开销', 5000, 14000, 28000, 31000, 42000, 21000);
        main4.setTitle('修改标题:setTitle');

        var main5 = new HxChartRadar('main5', indicator, '修改字体:setSize');
        main5.init();
        main5.putData('预算分配', 4300, 10000, 28000, 35000, 50000, 19000);
        main5.putData('实际开销', 5000, 14000, 28000, 31000, 42000, 21000);
        main5.setSize('l');
        var main6 = new HxChartRadar('main6', indicator, '修改字体:setSize');
        main6.init();
        main6.putData('预算分配', 4300, 10000, 28000, 35000, 50000, 19000);
        main6.putData('实际开销', 5000, 14000, 28000, 31000, 42000, 21000);
        main6.setSize('m');
        var main7 = new HxChartRadar('main7', indicator, '修改字体:setSize');
        main7.init();
        main7.putData('预算分配', 4300, 10000, 28000, 35000, 50000, 19000);
        main7.putData('实际开销', 5000, 14000, 28000, 31000, 42000, 21000);
        main7.setSize('s');
        var main8 = new HxChartRadar('main8', indicator, '修改背景:setBackground');
        main8.init();
        main8.putData('预算分配', 4300, 10000, 28000, 35000, 50000, 19000);
        main8.putData('实际开销', 5000, 14000, 28000, 31000, 42000, 21000);
        main8.setBackground('#eee');
    </script>
</body>

</html>